<template>
  <div :class="['online-video', 'clearfix', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="left">
      <client-only>
        <video-player
          ref="videoPlayer"
          @play="onPlayerPlay($event, 'videoPlayer')"
          :playsinline="true"
          :options="playerOptions"
          class="u-video video-player vjs-custom-skin"
          :webkit-playsinline="true"
          :x-webkit-airplay="true"
          playsinline
        />
      </client-only>
    </div>
    <div class="right">
      <div class="menu">
        <ul class="top">
          <li :class="['content', active === index ? 'active-content' : '']" v-for="(item, index) in menuList" @click="handleMenu(item, index)">
            {{ item.name }}
          </li>
        </ul>
        <!-- <ul class="bottom clearfix">
          <li class="content" v-for="item in menuBottom" :key="item">{{ item }}</li>
        </ul> -->
      </div>
      <div class="title">
        <div class="chinese">
          线上视频
        </div>
      </div>
      <div class="see-more">
        <div class="line"></div>
        <div @click="goOnline" class="text">查看更多<img src="@/static/img/home/arrow.png" alt=""></div>
      </div>
      <client-only>
        <video-player
          ref="smallVideoPlayer"
          @play="onSmallPlayerPlay($event, 'smallVideoPlayer')"
          :playsinline="true"
          :options="smallPlayerOptions"
          class="u-video video-player vjs-custom-skin"
        />
      </client-only>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {},
      smallPlayerOptions: {},
      menuList: [],
      active: 0
    }
  },
  created() {

  },
  mounted() {
    // this.getOnlineVideo()
    this.videoType()
    // this.customScrollTop()
    this.playerOptions = {
      playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
      autoplay: false, // 如果true,浏览器准备好时开始回放。
      aspectRatio: '4:3', // 播放器高宽占比（例如"16:9"或"4:3"）
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 导致视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [
        {
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://221.12.172.138:908/Upload/2021-01-11-11-27-56-1306734.mp4' // url地址
        }
      ],
      poster: '', // 封面地址
      // width: document.documentElement.clientWidth, //播放器宽度
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      preload: "auto"
    }
    this.smallPlayerOptions = {
      playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
      autoplay: false, // 如果true,浏览器准备好时开始回放。
      aspectRatio: '4:3', // 播放器高宽占比（例如"16:9"或"4:3"）
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 导致视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [
        {
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://221.12.172.138:908/Upload/2021-01-11-11-27-56-1306734.mp4' // url地址
        }
      ],
      poster: '', // 封面地址
      // width: document.documentElement.clientWidth, //播放器宽度
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      preload: "auto",
      videoList: []
    }
  },
  methods: {
    handleMenu(item, index) {
      this.active = index
      const params = {
        video_type: item.data_id,
        recommend: 1
      }
      this.getOnlineVideo(params)
    },
    videoType() {
      this.$api.videoType({}).then(res => {
        if (res.status == "$SUCCESS") {
          this.menuList = res.result.item_list
          this.getOnlineVideo({ video_type: this.menuList[0].data_id, recommend: 1 })
        }
      })
    },
    getOnlineVideo(params) {
      this.$api.getOnlineVideo(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result.item_list)
          this.videoList = Array.isArray(res.result.item_list) ? res.result.item_list.splice(0, 2) : []
          this.playerOptions.sources[0]['src'] = this.videoList[0].video_path
          this.playerOptions.poster = this.videoList[0].video_page || ''
          this.smallPlayerOptions.sources[0]['src'] = this.videoList[1].video_path
          this.smallPlayerOptions.poster = this.videoList[1].video_page || ''
        }
      })
    },
    onPlayerPlay(e, video_name) {
      this.$refs.smallVideoPlayer.player.pause()
      this.$refs.smallVideoPlayer.player.currentTime(0)
      // this.$refs.videoPlayer.player.requestFullscreen()
      // if (this.currentPlayer && this.activeVideo !== video_name){
      //   this.currentPlayer.pause()
      //   this.currentPlayer.currentTime(0)
      // }
      // this.currentPlayer = e
    },
    onSmallPlayerPlay(e, video_name) {

      // this.$refs.smallVideoPlayer.player.requestFullscreen()
      this.$refs.videoPlayer.player.pause()
      this.$refs.videoPlayer.player.currentTime(0)
    },
    goOnline() {
      this.$router.push('/onLineVideo')
    }
  }
}
</script>

<style lang="less" scoped>
.online-video {
  &.z-web {
    padding-bottom: 100px;

    .vjs-custom-skin > .video-js {
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0);

      .vjs-poster {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0);
      }
    }

    .left {
      float: left;
      .u-video {
        width: 1068px;
        height: 800px;
      }
    }

    .right {
      float: left;
      margin-left: 144px;
      text-align: center;

      .menu {
        vertical-align: top;
        display: inline-block;
        // margin-left: 125px;

        .top {
          display: flex;
        }

        .content {
          font-size: 24px;
          font-family: SourceHanSerifSC;
          font-weight: 600;
          color: #000;
          line-height: 72px;
          opacity: 0.5;
          writing-mode: vertical-lr;
          float: left;
          margin-bottom: 60px;
          cursor: pointer;

          &.active-content {
            opacity: 1;
          }
        }
      }
      .title {
        float: right;
      }
      .see-more {
        margin: 222px 0 60px 162px;
      }
      .u-video {
        width: 576px;
        height: 400px;
      }
    }

    .vjs-custom-skin > .video-js .vjs-big-play-button:focus,
    .vjs-custom-skin > .video-js .vjs-big-play-button:active {
      background-color: rgba(0, 0, 0, 0.9) !important;
    }
  }

  &.z-phone {
    position: relative;
    .left {
      .u-video {
        width: pxtorem(600);
        // height: pxtorem(450);
        margin-top: pxtorem(40);
      }

      ::v-deep(.vjs-custom-skin > .video-js) {
        height: pxtorem(450);
      }

      ::v-deep(.vjs-custom-skin > .video-js) {
        height: pxtorem(240);
      }

      ::v-deep(.vjs-custom-skin > .video-js .vjs-big-play-button) {
        // width: pxtorem(120);
        // height: pxtorem(120) !important;
        // border-radius: 50%;
        // border: 0;
        background-color: rgba(0,0,0,0.45);
        font-size: 3.5em;
        border-radius: 50%;
        height: 2em !important;
        line-height: 2em !important;
        margin-top: -1em !important;
        margin-left: -1em !important;
        width: 2em !important;
        outline: none;
        border: 0;
      }

      ::v-deep(.video-js .vjs-big-play-button .vjs-icon-placeholder:before) {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    .right {
      // position: relative;
      margin-top: pxtorem(60);
      height: pxtorem(240);
      margin-bottom: pxtorem(80);

      .u-video {
        width: pxtorem(320);
        // height: pxtorem(450);
        position: absolute;
        top: pxtorem(440);
        right: 0;
      }

      ::v-deep(.vjs-custom-skin > .video-js) {
        height: pxtorem(240);
      }

      ::v-deep(.vjs-custom-skin > .video-js .vjs-big-play-button) {
        background-color: rgba(0,0,0,0.45);
        font-size: 3.5em;
        border-radius: 50%;
        height: 2em !important;
        line-height: 2em !important;
        margin-top: -1em !important;
        margin-left: -1em !important;
        width: 2em !important;
        outline: none;
        border: 0;
      }

      ::v-deep(.video-js .vjs-big-play-button .vjs-icon-placeholder:before) {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title {
        position: absolute;
        right: pxtorem(80);
        top: 0;
      }

      .menu {
        display: inline-block;
        margin-left: pxtorem(146);

        .top {
          display: flex;
        }

        .content {
          font-size: pxtorem(24);
          font-weight: 600;
          color: #000;
          writing-mode: vertical-lr;
          opacity: 0.5;
          margin-right: pxtorem(60);

          &:last-child {
            margin-right: 0;
          }

          &.active-content {
            opacity: 1;
          }
        }
      }

      .see-more {
        width: pxtorem(150);
        margin-left: pxtorem(146);

        .text {
          margin-top: pxtorem(20);
        }

        img {
          width: pxtorem(40);
          margin-top: pxtorem(10);
        }
      }
    }
  }
}
</style>